<template>
	<view :style="{ height: appHeight }">
		<view class="page-index" :class="{'bgf':navIndex >0}">
			<!-- #ifdef H5 -->
			<view class="header">
				<view class="serch-wrapper flex">
					<!-- @click="changeLang" -->
					<view class="logo" @click="changeLang">
						<view class="" style="display: flex; align-items: center;">
							<view class="" style="color: #f3f3f3;width: 100%;">
								{{ZhOrEn=='en'?$t('locale.en'):$t('locale.ch')}}
								<!-- {{$t('locale.en')}} -->
							</view>
							<view class="" style="width: 16px;height: 16px;">
								<image :src="arrows" style="width: 100%;height: 100%;" mode=""></image>
							</view>
						</view>
						<!-- <image :src="logoUrl" mode="" style="width: 100%;height: 100%;" @click="changeLang"></image> -->
						<!-- <view class="" style="font-size: 14px;color: #fff;">
							抢拍商城
						</view> -->
					</view>
					<navigator url="/pages/goods_search/index" class="input" hover-class="none"><text
							class="iconfont icon-xiazai5"></text>
						{{$t('home.search.product')}}
					</navigator>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="header">
				<view class="sys-head"></view>
				<!-- :style="{ height: appHeight }" -->
				<view class="serch-box">
					<view class="serch-wrapper flex">
						<view class="logo" @click="changeLang">
							<view class="" style="display: flex; align-items: center;">
								<view class="" style="color: #f3f3f3;width: 100%;">
									{{ZhOrEn=='en'?$t('locale.en'):$t('locale.ch')}}
									<!-- {{$t('locale.en')}} -->
								</view>
								<view class="" style="width: 32rpx;height: 32rpx;">
									<image :src="arrows" style="width: 100%;height: 100%;" mode=""></image>
								</view>
							</view>
							<!-- <image :src="logoUrl" mode="" style="width: 100%;height: 100%;"></image>-->
						</view>
						<navigator url="/pages/goods_search/index" class="input" hover-class="none"><text
								class="iconfont icon-xiazai5"></text>
							{{$t('home.search.product')}}
						</navigator>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- 首页展示 -->
			<view class="page_content" :style="'margin-top:'+(statusBarHeight)+'px;'" v-if="navIndex == 0">
				<view class="mp-bg"></view>
				<!-- banner -->
				<view class="swiper" v-if="imgUrls.length">
					<swiper indicator-dots="true" :autoplay="true" :circular="circular" :interval="interval"
						:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
						<block v-for="(item,index) in imgUrls" :key="index">
							<swiper-item>
								<!-- :url='item.url' -->
								<navigator class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
									<image :src="item.pic" class="slide-image" lazy-load></image>
								</navigator>
							</swiper-item>
						</block>
					</swiper>
				</view>


				<!-- 首页 -->
				<!-- :class="iSshowH?'on':''" -->
				<view class="sticky-box">
					<!-- :style="'top:'+(statusBarHeight)+'px;'" -->
					<scroll-view class="scroll-view_H" style="width: 100%;" scroll-x="true" scroll-with-animation
						:scroll-left="tabsScrollLeft" @scroll="scroll">
						<view class="tab nav-bd" id="tab_list">
							<view id="tab_item" :class="{ 'active': item.select}" class="item" style="padding: 0 3px;"
								v-for="(item, index) in navList" :key="index" @click="ProductNavTab(item,index)">



								<!-- listActive == index -->
								<view class="txt">{{item.time}}</view>


								<view class="label">{{item.statusName}}

									<view class="" v-if="item.statusName==readyBegin">
										<u-count-down v-if="item.distanceStartEnd != null" ref="uCountDown"
											color="#e93323" :separator-size="12" :show-hours="false"
											:timestamp="item.distanceStartEnd"></u-count-down>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>


				<view class="card" style="position: sticky;top: 0;z-index: 99;">
					<!-- <u-tabs-swiper ref="uTabs" :list="listCard" :current="current" @change='tabsChange'
						:is-scroll="false" swiperWidth="750" active-color="#aa0000"
						inactive-color="#606266" ></u-tabs-swiper> -->

					<u-tabs :list="listCard" :is-scroll=true :current="current" @change="tabsChange" ref="tabs"
						swiperWidth="750" active-color="#aa0000" inactive-color="#606266"></u-tabs>

				</view>
				<!-- 888 -->
				<view class="wrap">
					<!-- <u-button @click="clear">清空列表</u-button> -->
					<u-waterfall v-model="productIndexList" ref="uWaterfall">
						<template v-slot:left="{leftList}">
							<view class="demo-warter" v-for="(item, index) in leftList" :key="index">

								<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"
									:loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
								<view class="demo-title">
									{{item.storeName}}
								</view>
								<view class="demo-price">
									{{item.price}}U
								</view>
								<view class="up_btn">
									<view class="title">

										<!-- {{item.otPrice}}U -->
									</view>
									<view class="btn_go">
										<u-button :custom-style="customStyle"
											@click="goBuy(item)">{{$t('mail.product.go-buy')}}</u-button>
									</view>
								</view>

							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
								<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"
								 :error-img="errorImg"	:loading-img="loadingImg"></u-lazy-load>
								<view class="demo-title">
									{{item.storeName}}
								</view>
								<view class="demo-price">
									{{item.price}}U
								</view>

								<view class="up_btn">
									<view class="title">
										<!-- {{item.otPrice}}U -->
									</view>
									<view class="btn_go">
										<u-button :custom-style="customStyle"
											@click="goBuy(item)">{{$t('mail.product.go-buy')}}</u-button>


									</view>
								</view>
								<!-- 		<view class="demo-shop">
							{{item.shop}}
						</view> -->
							</view>
						</template>
					</u-waterfall>
					<u-loadmore bg-color="rgb(240, 240, 240)" :load-text="loadText" :status="loadStatus"></u-loadmore>
				</view>
				<!-- <u-action-sheet :list="languageList" @click="clickSheet" v-model="showLangua"></u-action-sheet> -->
			</view>
		</view>
	</view>
</template>

<script>
	import Auth from '@/libs/wechat';
	import Cache from '../../utils/cache';
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	import {
		getIndexData,
		getCoupons,
		setCouponReceive
	} from '@/api/api.js';
	import {
		seckillNav,
		productIndex,
		getProducts,
		getCategory,
		getIndexProducts
	} from '@/api/new.js';
	// #ifdef MP-WEIXIN
	import {
		getTemlIds
	} from '@/api/api.js';
	// import {
	// 	SUBSCRIBE_MESSAGE,
	// 	TIPS_KEY
	// } from '@/config/cache';
	// #endif
	// #ifdef H5  
	import {
		follow
	} from '@/api/public.js';
	// #endif
	import {
		getShare
	} from '@/api/public.js';
	import a_seckill from './components/a_seckill';
	import b_combination from './components/b_combination';
	import c_bargain from './components/c_bargain';
	import goodList from '@/components/goodList';
	import promotionGood from '@/components/promotionGood';
	import couponWindow from '@/components/couponWindow';
	// import ClipboardJS from "@/plugin/clipboard/clipboard.js";
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {
		mapGetters
	} from "vuex";
	import tabNav from '@/components/tabNav.vue'
	import countDown from '@/components/countDown';
	import {
		getCategoryList,
		getProductslist,
		getProductHot,
		getGroomList
	} from '@/api/store.js';
	// import {
	// 	setVisit
	// } from '@/api/user.js'
	import recommend from '@/components/recommend';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif

	// #ifndef MP
	import {
		kefuConfig
	} from "@/api/public";

	// #endif
	import Loading from '@/components/Loading/index.vue';
	const arrTemp = ["beforePay", "afterPay", "refundApply", "beforeRecharge", "createBargain", "pink"];
	import {
		setTabBarText
	} from '@/libs/locale.js';
	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {
			tabNav,
			goodList,
			promotionGood,
			couponWindow,
			countDown,
			a_seckill,
			// b_combination,
			// c_bargain,
			recommend,
			// #ifdef MP
			authorize,
			// #endif
			Loading
		},
		data() {
			return {
				appHeight: app.globalData.appHeight,
				errorImg:"../../static/images/error.jpg",
				loadingImg: "../../static/images/loading.png",
				
				isLoading: "loading",
				color: '',
				languageList: [{
					text: '英文'
				}, {
					text: '中文'
				}],
				show: true,
				showLangua: false,
				loaded: false,
				loading: false,
				isAuto: false, 
				isShowAuth: false, 
				statusBarHeight: statusBarHeight,
				navIndex: 0,
				navTop: [],
				followUrl: "",
				followHid: true,
				followCode: false,
				logoUrl: "/static/images/languageChange.png",
				arrows: "/static/images/arrows.png",
				imgUrls: [],
				itemNew: [],
				menus: [],
				bastInfo: '',
				fastInfo: '',
				fastList: [],
				firstInfo: '',
				salesInfo: '',
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				window: false,
				iShidden: false,
				navH: "",
				newGoodsBananr: '',
				couponList: [],
				liveList: [],
				hotList: [{
					pic: '/static/images/hot_001.png'
				}, {
					pic: '/static/images/hot_002.png'
				}, {
					pic: '/static/images/hot_003.png'
				}],
				ProductNavindex: 0,
				marTop: 0,
				childID: 0,
				loadend: false,
				loadText: {
					loadmore: this.$t('public.tips.load-more'),
					loading: this.$t('public.tips.now-loading'),

				},
				sortProduct: [],
				where: {
					cid: 0,
					page: 1,
					limit: 10,
				},
				is_switch: true,
				hotPage: 1,
				hotLimit: 10,
				hotScroll: false,
				explosiveMoney: [],
				prodeuctTop: 0,
				searchH: 0,
				isFixed: false,
				goodType: 0,
				goodScroll: true,
				params: { //分页
					page: 1,
					limit: 10,
					cid: '',
					keyword: ''
				},
				productArr: [], // 新临时数组
				tempArr: [], //临时数组
				roll: [], // 
				site_name: '', //首页title
				iSshowH: false,
				configApi: {},
				spikeList: [],
				point: '',
				privacyStatus: false, // 
				tabsScrollLeft: 0, // tabs当前偏移量
				scrollLeft: 0,
				lineColor: 'red',
				lineStyle: {}, // 下划线位置--动
				listActive: 0, // 当前选中项

				duration: 0.2, // 下划线动画时长
				navList: [],
				productIndexList: [],
				loadStatus: this.$t('public.tips.load-more'),
				customStyle: {
					// marginTop: '20px',
					background: '#169bd5',
					width: '75px',
					height: '30px',
					color: '#fff'

				},
				listCard: [],
				current: 0,
				readyBegin: this.$t('home.activity.ready-begin'),
				ZhOrEn: uni.getStorageSync('AppLocale').code
			}
		},
		watch: {
			ProductNavindex(newVal) { // 监听当前选中项
				this.setTabList()
			},
			listActive(newVal) { // 监听当前选中项
				this.setTabList()
			},
			// current(newVal){
			// 	this.productIndexList()
			// }
		},
		mounted() {
			this.setTabList()
			console.log(this.statusBarHeight, 'statusBarHeight');
		},
		onLoad() {




			var that = this;
			// 获取系统信息
			uni.getSystemInfo({
				success(res) {
					that.$store.commit("SYSTEM_PLATFORM", res.platform);
				}
			});

			console.log(uni.getSystemInfoSync().statusBarHeight, 'statusBarHeight');

			let self = this

			// #ifndef APP-PLUS
			this.navH = 0;
			// #endif

			this.getIndexConfig();

			this.getList()
			this.NavList()
			this.getData()
		},
		onShow() {
			// this.ZhOrEn = uni.getStorageSync('AppLocale').code
			let self = this
			uni.setNavigationBarTitle({
				title: self.site_name
			})

			if (uni.getStorageSync('needUpdateTabBar')) {
				uni.removeStorageSync('needUpdateTabBar');
				setTabBarText.call(this);
				console.log('ooooo');
			}

		},
		methods: {

			changeLang() {
				// this.showLangua = true

				const localeArr = [{
						text: this.$t('locale.en'),
						code: 'en'
					},
					{
						text: this.$t('locale.zh-hant'),
						code: 'zh-Hant'
					}
				];
				const _lArr = localeArr.map((item) => item.text);
				uni.showActionSheet({
					title: this.$t('locale.changeLocale'),
					itemList: _lArr,
					success: (e) => {
						let _data = localeArr[e.tapIndex];
						const systemInfo = uni.getSystemInfoSync();
						const isAndroid = systemInfo.platform.toLowerCase() === 'android';
						if (isAndroid) {
							uni.showModal({
								content: this.$t('index.language-change-confirm'),
								success: (res) => {
									if (res.confirm) {
										this.toChangeLanguage(_data);
									}
								}
							})
						} else {
							this.toChangeLanguage(_data);
						}
					},
				});
			},
			// 进行切换
			toChangeLanguage(data) {
				uni.setLocale(data.code);
				this.$i18n.locale = data.code;
				this.locale = data.text;
				console.log(data, 'datadatadatadatadata');
				uni.setStorageSync('AppLocale', data);
				uni.setStorageSync('needUpdateTabBar', true);

				let route = this.$route
				console.log(route, 'route', '/' + route.meta.pagePath);

				uni.reLaunch({
					url: '/' + route.meta.pagePath
				})

			},
			// tabs通知swiper切换
			tabsChange(index) {


				let id = this.listCard[index].id
				console.log(id, 'ppppooo');
				this.swiperCurrent = index;
				this.current = index
				this.params.page = 1
				this.getData(id)


			},
			getList() {
				getCategory().then(res => {
					// this.listCard = res.data
					console.log(res.data, 'listCardlistCardlistCardlistCard');
					let ch = uni.getStorageSync('AppLocale').code

					let arr = res.data
					arr.forEach(item => {
						if (item.name) {


							if (item.name.includes('|')) {
								if (ch == "en") {
									item.name = item.name ? item.name.split('|')[0] : ''
								} else {
									item.name = item.name ? item.name.split('|')[1] : ''
								}

							}
						}

					})
					this.listCard = arr

				})
			},
			getData(id) {
				// let id = res.data[0].id
				// this.productIndexList = []
				// this.$ref.leftList = []
				let that = this
				let listBak = this.productIndexList
				if (id) {
					if (this.params.cid == id) {
						console.log('????/');
						// 如果 上拉 和上次的是同一个 类型,则不用清除列表
					} else {
						this.$refs.uWaterfall.clear()
						this.params.cid = id
						console.log('!!!!!!!');
					}

					getIndexProducts(this.params).then(res => {
						// this.productIndexList = res.data.list
						// that.loadStatus = this.
						if (res.data.list.length == 0) {

							that.$util.Tips({
								title: this.$t('public.tips.no-data')
							})
							that.loadStatus = 'loadmore'
							console.log('空數組');
							this.productIndexList = res.data.list
						} else {

							let ch = uni.getStorageSync('AppLocale').code
							console.log(ch, 'chhhhhhhhhh');
							let arr = res.data.list
							arr.forEach(item => {
								if (item.storeName.includes('|')) {
									if (ch == "en") {
										item.storeName = item.storeName ? item.storeName.split('|')[0] : ''
										item.content = item.content ? item.content.split('|')[0] : ''
									} else {
										item.storeName = item.storeName ? item.storeName.split('|')[1] : ''
										item.content = item.content ? item.content.split('|')[1] : ''
									}

								}

							})

							this.productIndexList = [...this.productIndexList, ...arr]
							console.log('有值');
							console.log(this.productIndexList, 're6666返回的=', res.data.list);
						}

					})

				} else {
					let ch = uni.getStorageSync('AppLocale').code

					getCategory().then(res => {
						this.listCard = res.data
						let data = {
							id: '',
							name: ch == 'en' ? 'All' : "全部",
							sort: 0
						}
						this.listCard.unshift(data)

						let arr = res.data
						arr.forEach(item => {
							if (item.name.includes('|')) {
								if (ch == "en") {
									item.name = item.name.split('|')[0]
								} else {
									item.name = item.name.split('|')[1]
								}

							}

						})
						this.listCard = arr

						// this.dataId = res.data[0].id
						// let params = {
						// 	page:1,
						// 	limit:5,
						// 	cid:id
						// }
						this.params.cid = id
						getIndexProducts(this.params).then(res => {

							if (res.data.list == []) {
								that.loadStatus = 'loadmore'
								that.$util.Tips({
									title: this.$t('public.tips.no-data')
								})

							} else {

								let ch = uni.getStorageSync('AppLocale').code
								console.log(ch, 'chhhhhhhhhh');
								let arr1 = res.data.list
								console.log(res.data.list, 'res.data.list');

								arr1.forEach(item => {
									if (item.storeName.includes('|')) {
										if (ch == "en") {
											item.storeName = item.storeName.split('|')[0]
											item.content = item.content ? item.content.split('|')[
												0] : ''
										} else {
											item.storeName = item.storeName.split('|')[1]
											item.content = item.content ? item.content.split('|')[
												1] : ''
										}
									}
								})

								console.log(arr1, 'arr1');
								this.productIndexList = [...this.productIndexList, ...arr1]
								that.loadStatus = 'loadmore'
							}

						})
					})

				}
				this.$forceUpdate()

			},
			goBuy(item) {
				let data = {
					id: item.id,
					img: item.image,
					price: item.price,
					storeName: item.storeName,
					otPrice: item.otPrice
				}
				uni.navigateTo({
					url: `/pages/new_Shop/submitOrder/submitOrder?id=${item.id}&img=${item.image}&price=${item.price}&storeName=${item.storeName}&otPrice=${item.otPrice}&content=${item.content}`
				})
				console.log(item, 'item');
			},
			NavList() {
				seckillNav().then(res => {
					console.log(res, 'seckillNav');
					this.navList = res.data
					this.navList.forEach(item => {
						if (item.statusName == '进行中') {
							item.select = true
							item.statusName = this.$t('home.activity.start')
						}
						if (item.statusName == '已结束') {
							item.statusName = this.$t('home.activity.end')
						}
						if (item.statusName == '即将开始') {
							item.statusName = this.$t('home.activity.ready-begin')
						}

					})

					// console.log(this.navList, 'mmmmm');
				})
			},

			clickSort(index) {
				this.listActive = index
			},
			// scroll-view滑动事件
			scroll(e) {
				this.scrollLeft = e.detail.scrollLeft;
			},
			setTabList() {
				this.$nextTick(() => {
					//this.setLine()
					this.scrollIntoView()
				})
			},
			// 计算tabs位置
			scrollIntoView() { // item滚动
				let lineLeft = 0;
				this.getElementData('#tab_list', (data) => {
					let list = data[0]
					this.getElementData(`#tab_item`, (data) => {
						let el = data[this.listActive]
						lineLeft = el.width / 2 + (-list.left) + el.left - list.width / 2 - this.scrollLeft
						this.tabsScrollLeft = this.scrollLeft + lineLeft
					})
				})
			},
			//  计算下划线位置
			setLine() {
				let lineWidth = 0,
					lineLeft = 0
				this.getElementData(`#tab_item`, (data) => {
					let el = data[this.listActive]
					lineWidth = el.width / 2
					// lineLeft = el.width * (this.currentIndex + 0.5)  // 此种只能针对每个item长度一致的
					lineLeft = el.width / 2 + (-data[0].left) + el.left
					this.lineStyle = {
						width: `${lineWidth}px`,
						transform: `translateX(${lineLeft}px) translateX(-50%)`,
						transitionDuration: `${this.duration}s`
					};
				})
			},
			getElementData(el, callback) {
				uni.createSelectorQuery().in(this).selectAll(el).boundingClientRect().exec((data) => {
					callback(data[0]);
				});
			},


			// 首页数据
			getIndexConfig: function() {
				let that = this;
				getIndexData().then(res => {
					uni.setNavigationBarTitle({
						title: '首页'
					})
					// that.$set(that, "logoUrl", res.data.logoUrl);
					that.$set(that, "site_name", '首页');
					that.$set(that, "imgUrls", res.data.banner);
					// that.$set(that, "menus", res.data.menus);
					that.$set(that, "roll", res.data.roll ? res.data.roll : []);
					// #ifdef H5
					that.$store.commit("SET_CHATURL", res.data.yzfUrl);
					Cache.set('chatUrl', res.data.yzfUrl);
					// #endif
					that.$set(that, "explosiveMoney", res.data.explosiveMoney);
					that.goodType = res.data.explosiveMoney[0].type
					// this.getGroomList();

					// this.getcouponList();
					// #ifdef H5
					// that.subscribe = res.data.subscribe;
					// #endif

				})
			},
			getcouponList() {
				let that = this;
				getCoupons({
					page: 1,
					limit: 6
				}).then(res => {
					that.$set(that, "couponList", res.data);
					// 小程序判断用户是否授权；
					// #ifdef MP
					uni.getSetting({
						success(res) {
							if (!res.authSetting['scope.userInfo']) {
								that.window = that.couponList.length ? true : false;
							} else {
								that.window = false;
								that.iShidden = true;
							}
						}
					});
					// #endif
					// #ifndef MP
					if (that.isLogin) {
						that.window = false;
					} else {
						that.window = res.data.length ? true : false;
					}
					// #endif
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},

			getChatUrL() {
				kefuConfig().then(res => {
					let data = res.data;
					this.$store.commit("SET_CHATURL", data.yzfUrl);
					Cache.set('chatUrl', data.yzfUrl);
				})
			},
			authColse: function(e) {
				this.isShowAuth = e
			},

			// 
			ProductNavTab(item, index) {
				this.listActive = index
				this.goodType = item.type
				this.listActive = index
				this.ProductNavindex = index

				for (let i = 0; i < this.navList.length; i++) {
					this.navList[i].select = false
				}
				this.navList[index].select = true
				this.productArr = []
				this.tempArr = []
				this.params.page = 1
				this.goodScroll = true
				let onloadH = true
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/auction/auction_seckill/auction'
					})
				}, 600)

			},


			// 精品推荐
			getGroomList(onloadH) {
				this.loading = true
				let type = this.goodType;
				if (!this.goodScroll) return
				if (onloadH) {
					this.iSshowH = true
				}
				getGroomList(type, this.params).then(({
					data
				}) => {
					this.iSshowH = false
					this.loading = false
					this.goodScroll = data.list.length >= this.params.limit
					this.params.page++
					this.tempArr = this.tempArr.concat(data.list)
				})
			},
			getProduct() {
				productIndex().then(res => {
					this.productIndexList = res.data.list
				})
			},

			get_host_product: function() {
				let that = this;
				that.loading = true;

				if (that.hotScroll) return
				getProductHot(
					that.hotPage,
					that.hotLimit,
				).then(res => {
					that.hotPage++
					that.hotScroll = res.data.list.length < that.hotLimit
					that.hostProduct = that.hostProduct.concat(res.data.list)
				});
			},
		},
		mounted() {
			let self = this
			// #ifdef H5
			//self.getChatUrL();
			// 获取H5 搜索框高度
			let appSearchH = uni.createSelectorQuery().select(".serch-wrapper");
			appSearchH.boundingClientRect(function(data) {
				self.searchH = data.height
			}).exec()
			// #endif
		},

		onReachBottom() {
			let that = this
			this.loadStatus = 'loading'
			this.params.page++
			this.getData(this.params.cid)

			// setTimeout(() => {
			// 		// this.addRandomData();
			// 		that.loadStatus = '没有更多数据了~'
			// 		that.$util.Tips({
			// 			title: "没有更多数据了~"
			// 		})
			// }, 1500)
		},
	}
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* #ifdef H5 */
		background-color: #fff;
		/* #endif */

	}
</style>
<style lang="scss">
	.notice {
		width: 100%;
		height: 70rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 25rpx;
		line-height: 70rpx;
		padding: 0 14rpx;

		.line {
			color: #CCCCCC;
		}

		.pic {
			width: 130rpx;
			height: 36rpx;

			image {
				width: 100%;
				height: 100%;
				display: block !important;
			}
		}

		.swipers {
			height: 100%;
			width: 444rpx;
			overflow: hidden;

			swiper {
				height: 100%;
				width: 100%;
				overflow: hidden;
				font-size: 22rpx;
				color: #333333;
			}
		}

		.iconfont {
			color: #999999;
			font-size: 20rpx;
		}
	}

	.couponIndex {
		width: auto;
		height: 238rpx;
		background-image: url('~@/static/images/yhjsy.png');
		background-size: 100% 100%;
		padding-left: 42rpx;
		margin-bottom: 30rpx;

		.titBox {
			padding: 47rpx 0;
			text-align: center;
			height: 100%;

			.tit1 {
				color: #FFEBD2;
				font-size: 34rpx;
				font-weight: 600;
			}

			.tit2 {
				color: #FFEBD2;
				font-size: 22rpx;
				margin: 10rpx 0 26rpx 0;
			}

			.tit3 {
				color: #FFDAAF;
				font-size: 24rpx;

				.iconfont {
					font-size: 20rpx;
				}
			}
		}


		.listBox {
			padding: 14rpx 0;

			.listActive {
				background-image: url('~@/static/images/lingyhj.png');
				background-size: 100% 100%;
			}

			.listHui {
				background-image: url('~@/static/images/weiling.png');
				background-size: 100% 100%;
			}

			.list {
				width: 170rpx;
				height: 210rpx;
				padding: 16rpx 0;
				text-align: center;
				margin-left: 24rpx;

				.tit {
					font-size: 18rpx;
					padding: 0 26rpx;
				}

				.titActive {
					color: #C99959;
				}

				.price {
					font-size: 46rpx;
					font-weight: 900;
					margin-top: 4rpx;
				}

				.pricehui {
					color: #B2B2B2;
				}

				.fonthui {
					background-color: #F5F5F5 !important;
				}

				.yuan {
					font-size: 24rpx;
				}

				.ling {
					font-size: 24rpx;
					margin-top: 9.5rpx;
					width: 102rpx;
					height: 36rpx;
					line-height: 36rpx;
					background-color: #FFE5C7;
					border-radius: 28rpx;
					margin: auto;
				}

				.priceM {
					color: #FFDAAF;
					font-size: 22rpx;
					margin-top: 14rpx;
				}
			}
		}
	}

	.sticky-box {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		position: -webkit-sticky;
		/* #endif */


		/* #ifdef H5*/
		top: var(--window-top);
		/* #endif */

		z-index: 99;
		flex-direction: row;
		margin: 0px;
		background: #FFF;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.listAll {
		width: 20%;
		text-indent: 62rpx;
		font-size: 30rpx;
		border-left: 1px #eee solid;
		margin: 1% 0;
		padding: 5rpx;
		position: relative;

		image {
			position: absolute;
			left: 20rpx;
			top: 8rpx;
		}
	}

	.tab {
		position: relative;
		display: flex;
		font-size: 28rpx;
		white-space: nowrap;

		&__item {
			flex: 1;
			padding: 0 20rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			color: #666;

			&.active {
				color: #09C2C9;
			}
		}
	}

	.tab__line {
		display: block;
		height: 6rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		border-radius: 3rpx;
		position: relative;
		background: #2FC6CD;
	}

	.scroll-view_H {
		/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
		white-space: nowrap;
		width: 100%;
	}


	.privacy-wrapper {
		z-index: 999;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #7F7F7F;

		.privacy-box {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 560rpx;
			padding: 50rpx 45rpx 0;
			background: #fff;
			border-radius: 20rpx;

			.title {
				text-align: center;
				font-size: 32rpx;
				text-align: center;
				color: #333;
				font-weight: 700;
			}

			.content {
				margin-top: 20rpx;
				line-height: 1.5;
				font-size: 26rpx;
				color: #666;
				text-indent: 54rpx;

				i {
					font-style: normal;
					color: $theme-color;
				}
			}

			.btn-box {
				margin-top: 40rpx;
				text-align: center;
				font-size: 30rpx;

				.btn-item {
					height: 82rpx;
					line-height: 82rpx;
					background: linear-gradient(90deg, #F67A38 0%, #F11B09 100%);
					color: #fff;
					border-radius: 41rpx;
				}

				.btn {
					padding: 30rpx 0;
				}
			}
		}
	}

	.demo-warter {
		border-radius: 8px;
		margin: 3px;
		background-color: #ffffff;
		padding: 7px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.up_btn {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-size: 14px;
			font-weight: bold;
			color: red;
		}

		.btn_go {
			margin-left: 8px;
		}
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.page-index {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);

		.header {
			width: 100%;
			background-color: $theme-color;
			padding: 28rpx 30rpx;

			.serch-wrapper {
				align-items: center;


				.logo {
					width: 120rpx;
					// width: 62rpx;
					height: 62rpx;
					margin-right: 24rpx;
					display: flex;
					align-items: center;
				}

				.image1 {
					width: 118rpx;
					height: 42rpx;
				}

				.input {
					display: flex;
					align-items: center;
					width: 546rpx;
					height: 58rpx;
					padding: 0 0 0 30rpx;
					background: rgba(247, 247, 247, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 29rpx;
					color: #BBBBBB;
					font-size: 26rpx;

					.iconfont {
						margin-right: 20rpx;
						font-size: 26rpx;
						color: #666666;
					}
				}
			}

			.tabNav {
				padding-top: 24rpx;
			}
		}

		/* #ifdef MP */
		.mp-header {
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			/* #ifdef H5 */
			padding-bottom: 20rpx;
			/* #endif */
			background-color: $theme-color;

			.serch-wrapper {
				height: 100%;
				align-items: center;
				padding: 0 50rpx 0 53rpx;

				image {
					width: 118rpx;
					height: 42rpx;
					margin-right: 30rpx;
				}

				.input {
					display: flex;
					align-items: center;
					/* #ifdef MP */
					width: 305rpx;
					/* #endif */
					height: 50rpx;
					padding: 0 0 0 30rpx;
					background: rgba(247, 247, 247, 1);
					border: 1px solid rgba(241, 241, 241, 1);
					border-radius: 29rpx;
					color: #BBBBBB;
					font-size: 28rpx;

					.iconfont {
						margin-right: 20rpx;
					}
				}
			}
		}

		/* #endif */

		.page_content {
			background-color: #f5f5f5;
			/* #ifdef H5 */
			// margin-top: 20rpx !important;
			padding: 0 20rpx 55px;
			/* #endif */
			/* #ifdef APP-PLUS */
			// margin-top: 20rpx !important;
			padding: 0 20rpx 0px;
			/* #endif */


			.swiper {
				position: relative;
				width: 100%;
				height: 280rpx;
				margin: 0 auto;
				border-radius: 10rpx;
				overflow: hidden;
				margin-bottom: 25rpx;
				/* #ifdef MP */
				z-index: 10;
				margin-top: 20rpx;

				/* #endif */
				swiper,
				.swiper-item,
				image {
					width: 100%;
					height: 280rpx;
					border-radius: 10rpx;
				}
			}

			.nav {
				padding-bottom: 26rpx;
				background: #fff;
				opacity: 1;
				border-radius: 14rpx;
				width: 100%;
				margin-bottom: 30rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 20%;
					margin-top: 30rpx;

					image {
						width: 82rpx;
						height: 82rpx;
					}
				}
			}


			.nav-bd {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.txt {
						font-size: 28rpx;
						color: #282828;
					}

					.label {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 116rpx;
						height: 32rpx;
						margin-top: 5rpx;
						font-size: 24rpx;
						color: #999;
					}

					&.active {
						color: $theme-color;

						.txt {
							color: $theme-color;
						}

						.label {
							background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
							border-radius: 16rpx;
							color: #fff;
						}
					}
				}
			}

			.index-product-wrapper {
				margin-bottom: 110rpx;

				&.on {
					min-height: 1500rpx;
				}

				.list-box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						width: 335rpx;
						margin-bottom: 20rpx;
						background-color: #fff;
						border-radius: 10rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 330rpx;
						}

						.text-info {
							padding: 10rpx 20rpx 15rpx;

							.title {
								color: #222222;
							}

							.old-price {
								margin-top: 8rpx;
								font-size: 26rpx;
								color: #AAAAAA;
								text-decoration: line-through;

								text {
									margin-right: 2px;
									font-size: 20rpx;
								}
							}

							.price {
								display: flex;
								align-items: flex-end;
								color: $theme-color;
								font-size: 34rpx;
								font-weight: 800;

								text {
									padding-bottom: 4rpx;
									font-size: 24rpx;
									font-weight: 800;
								}

								.txt {
									display: flex;
									align-items: center;
									justify-content: center;
									width: 28rpx;
									height: 28rpx;
									margin-left: 15rpx;
									margin-bottom: 10rpx;
									border: 1px solid $theme-color;
									border-radius: 4rpx;
									font-size: 22rpx;
									font-weight: normal;
								}
							}
						}
					}

					&.on {
						display: flex;
					}
				}
			}
		}
	}

	.productList {
		/* #ifdef H5 */
		padding-bottom: 140rpx;
		/* #endif */
	}

	.productList .list {
		padding: 0 20rpx;
	}

	.productList .list.on {
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.productList .list .item.on {
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 30rpx 0;
		margin: 0;
	}

	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 345rpx;
	}

	.productList .list .item .pictrue.on {
		width: 180rpx;
		height: 180rpx;
	}

	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}

	.productList .list .item .text {
		padding: 20rpx 17rpx 26rpx 17rpx;
		font-size: 30rpx;
		color: #222;
	}

	.productList .list .item .text.on {
		width: 508rpx;
		padding: 0 0 0 22rpx;
	}

	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}

	.productList .list .item .text .money.on {
		margin-top: 50rpx;
	}

	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}

	.productList .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}

	.productList .list .item .text .vip.on {
		margin-top: 12rpx;
	}

	.productList .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
	}

	.productList .list .item .text .vip .vip-money image {
		width: 46rpx;
		height: 21rpx;
		margin-left: 4rpx;
	}

	.pictrue {
		position: relative;
	}

	.fixed {
		z-index: 100;
		position: fixed;
		left: 0;
		top: 0;
		background: linear-gradient(90deg, red 50%, #ff5400 100%);

	}

	.mores-txt {
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 20rpx;
		}
	}

	.menu-txt {
		font-size: 24rpx;
		color: #454545;
	}

	.mp-bg {
		position: absolute;
		left: 0;
		/* #ifdef H5 */
		top: 98rpx;
		/* #endif */
		width: 100%;
		height: 304rpx;
		background: linear-gradient(180deg, #E93323 0%, #F5F5F5 100%, #751A12 100%);
		// border-radius: 0 0 30rpx 30rpx;
	}
</style>